<template>
  <div class="echart-box">
    <span>this is echart box page</span>
    <div
      id="myChart"
      ref="myEchart"
      class="chartbox"
    />
  </div>
</template>

<script>
// 引入基本模板
let echarts = require('echarts/lib/echarts')
// 引入柱状图组件
require('echarts/lib/chart/bar')
// 引入提示框和title组件
require('echarts/lib/component/tooltip')
require('echarts/lib/component/title')
export default {
  name: 'Tab2',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App',
    }
  },
  mounted () {
    this.drawLine()
  },
  methods: {
    drawLine () {
      // 基于准备好的dom，初始化echarts实例
      let myChart = echarts.init(this.$refs.myEchart)
      // 绘制图表
      myChart.setOption({
        title: { text: 'ECharts 入门示例' },
        tooltip: {},
        xAxis: {
          data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子'],
        },
        yAxis: {},
        series: [{
          name: '销量',
          type: 'bar',
          data: [5, 20, 36, 10, 10, 20],
        }],
      })
    },
  },
}
</script>

<style lang="scss">
  .chartbox {
    width: 1000px;
    height: 500px;
  }
</style>
